<template>
  <div class="nav-bar">
     <div class="left">
       <slot name="left"></slot>
     </div>
     <div class="center">
       <slot name="center"></slot>
     </div>
     <div class="right" v-show="edit" @click="editClick">
       <slot name="right">{{store.state.edit?"编辑":"完成"}}</slot>
     </div>
  </div>
</template>

<script>
import emitter  from '../../assets/js/evenbus'
import {Toast} from 'vant'
import {useStore} from 'vuex'
export default {
   name:'NavBar',
   props:['edit'],
   setup(){
     const store = useStore();
     const editClick=()=>{
           if(store.state.cartList.length){
                emitter.emit('editClick')
         }else{
           Toast.fail('购物车空空如也[○･｀Д´･ ○]')
         }
     }
     return {
       editClick,
       store,
     }
   }
}
</script>

<style scoped lang="less">
  .nav-bar{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 45px;
   border-bottom: 1px solid #eee;
   padding: 0 20px;
  //  .left, .right{
  //    width: 20%;
  //    height: 45px;
  //    line-height: 45px;
  //    font-size: 19px;
  //    font-weight: 700;
  //    background-color: #fff;
  //  }
   .left{
        text-align: left;
  
   }
   .right{
     text-align: center;
   }
   .center{
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex: 1;
      font-weight: 700;
      font-size: 20px;
   }
  }
</style>